<template>
  <div class="detail">
    <div class="nav">
      <Nav>
        <i @click="goback" class="el-icon-arrow-left" slot="icon"></i>
        <i class="el-icon-more" slot="login"></i>
      </Nav>
    </div>
    <img :src="detail.img" alt="" />
    <p>{{ detail.title }}</p>
    <h3>￥{{ detail.price }}</h3>
    <button @click="addCart(detail._id)">加入购物车</button>
  </div>
</template>

<script>
import axios from "axios";
import { Nav } from "../nav/index.js";
export default {
  data() {
    return {
      detail: "",
    };
  },
  methods: {
    getDetail() {
      axios.post("/getDetail", this.$route.params).then((data) => {
        this.detail = data.data[0];
      });
    },
    goback() {
      this.$router.push("/");
    },
    addCart(e) {
      axios
        .post("/addCart", { id: e })
        .then((data) => {
          this.$message({
            message: data.data,
            type: "success",
            // duration:0
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  components: {
    Nav,
  },
  created() {
    this.getDetail();
  },
};
</script>

<style scoped>
.detail {
  position: relative;
}
.nav {
  /* background-color: transparent; */
  width: 100%;
  position: absolute;
}
.nav >>> .nav-box {
  background-color: transparent;
}
i {
  color: rgba(0, 0, 0, 0.5);
  font-size: 30px;
}
.detail img {
  width: 100%;
}
.detail h3 {
  color: red;
  margin: 10px !important;
  font-size: 30px;
}
.detail p {
  font-size: 14px;
  font-weight: 700;
  margin: 10px !important;
}
.detail button {
  height: 50px;
  width: 150px;
  background-color: red;
  border-radius: 50px;
  outline: none;
  border: none;
  font-size: 20px;
  color: white;
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>